<!doctype html>
<html>
	<head>
		<title>new issue - {{ name }}/{{ project }}</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.2.2/font/bootstrap-icons.css">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
	</head>
	<body>
		{% load static %}
		<nav class="navbar navbar-light bg-light">
			<div class="navbar-header">
				<a href="/" class="navbar-brand">
					<img src="{% static 'images/icon.png' %}" class="rounded-sm" width="30" height="30">
					mchub&nbsp;&nbsp;
				</a>
			</div>
			<form class="form-inline">
				<button class="btn btn-link"><a href="/">Explore</a></button>
				{% if not logined %}
				<button class="btn btn-outline-primary"><a href="/signup/">Sign up</a></button>
				{% endif %}
				{% if logined %}
				<div class="dropdown">
					<a class="dropdown-toggle" href="#" role="button" id="u" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<b class="bi bi-people-circle" style="font-size: 120%"></b>
					</a>
					<div class="dropdown-menu dropdown-menu-sm-right" aria-labelledby="u">
						<a href="#" class="dropdown-item"><span>Signed in as<br>
							<b>{{ username }}</b></span></a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">Settings</a>
						<a class="dropdown-item" href="/logout/">Log out</a>
					</div>
				</div>
				{% endif %}
			</form>
		</nav>	
		<div>
			<div class="clearfix m-3 p-1">
				<h3 class="float-left p-1">
					<a href="#">{{ name }}</a> /
					<a href="/{{ name }}/{{ project }}">{{ project }}</a>
				</h3>
				<div class="float-right p-1">
					<button class="btn btn-sm btn-primary">
						Stars: {{ detail.stars }}
					</button>
				</div>
			</div>
			<ul class="nav nav-tabs p-1">
				<li class="nav-item">
					{% if tab == 'code' %}
					<a class="nav-link active" href="/{{ name }}/{{ project }}">
						<b class="bi bi-code" style="font-size: 120%"></b> Code
					</a>
					{% else %}
					<a class="nav-link" href="/{{ name }}/{{ project }}">
						<b class="bi bi-code" style="font-size: 120%"></b> Code
					</a>
					{% endif %}
				</li>
				<li class="nav-item">
					{% if tab == 'issues' %}
					<a class="nav-link active" href="/{{ name }}/{{ project }}/issues}">
						<b class="bi bi-exclamation-circle" style="font-size: 120%"></b> Issues
					</a>
					{% else %}
					<a class="nav-link" href="/{{ name }}/{{ project }}/issues">
						<b class="bi bi-exclamation-circle" style="font-size: 120%"></b> Issues
					</a>
					{% endif %}
				</li>
				<li class="nav-item">
					{% if tab == 'wiki' %}
					<a class="nav-link active" href="#">
						<b class="bi bi-book" style="font-size: 120%"></b> Wiki
					</a>
					{% else %}
					<a class="nav-link" href="#">
						<b class="bi bi-book" style="font-size: 120%"></b> Wiki
					</a>
					{% endif %}
				</li>
				{% if logined %}
				{% if name == username %}
				<li class="nav-item">
					{% if tab == 'settings' %}
					<a class="nav-link active" href="#">
						<b class="bi bi-gear" style="font-size: 120%"></b> Settings
					</a>
					{% else %}
					<a class="nav-link" href="#">
						<b class="bi bi-gear" style="font-size: 120%"></b> Settings
					</a>
					{% endif %}
				</li>
				{% endif %}
				{% endif %}
			</ul>
			<div class="m-3 p-1">
				<form class="row mw-100" action="{{ name }}/{{ project }}/issues/new/" method="post">
					{% csrf_token %}
					<div class="col-8 border rounded ml-3">
						<input class="form-control mt-3 mb-3" name="title" placeholder="Title" required>
						<textarea class="form-control mb-3" name="comment " id="c" rows="5" placeholder="Comment" oninput="$('#p').html($('#c').val()==''?'<i class=text-secondary>Nothing to preview.</i>':marked($('#c').val()));"></textarea>
						<div class="collapse mb-3" id="preview">
							<div class="card card-body" id="p">
								<i class="text-secondary">Nothing to preview.</i>
							</div>
						</div>
						<div class="clearfix mb-2">
							<p class="text-secondary float-left">
								<b class="bi bi-markdown-fill" style="font-size: 120%"></b>
								Styling with Markdown is supported.
							</p>
							<div class="float-right">
								<a class="btn btn-sm btn-primary" data-toggle="collapse" href="#preview" role="button" aria-expanded="false" aria-controls="preview">Preview</a>&nbsp;
								<button type="submit" class="btn btn-sm btn-primary">
									Create new issue
								</button>
							</div>
						</div>
					</div>
					<div class="col">
						<div>
							<h5 class="text-secondary">Label</h5>
							<select class="form-control" name="label">
								<option value="none">None</option>
								<option value="bug">bug</option>
								<option value="document">document</option>
								<option value="enhancement">enhancement</option>
								<option value="help-wanted">help wanted</option>
								<option value="invalid">invalid</option>
								<option value="question">question</option>
								<option value="wontfix">wontfix</option>
							</select>
							<hr>
						</div>
					</div>
				</form>
			</div>
		</div>
		<footer>
			<hr>
			<p class='m-1' id="footer">Build with <a href="https://www.djangoproject.com/">Django 3.1.4</a>.</p>
		</footer>
	</body>
</html>
